import React, { Component } from 'react'
import './Table.css'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { TabBar, Badge } from 'antd-mobile'
import {
   SystemQRcodeOutline,
   AppstoreOutline,
   MessageOutline,
   UserCircleOutline
} from 'antd-mobile-icons'

class MyTabBar extends Component {
   state = {
      commonTabbar: [
         {
            key: 'dashen',
            title: '老板列表',
            icon: <AppstoreOutline />,
            badge: Badge.dot,
         },
         {
            key: 'laoban',
            title: '大神列表',
            icon: <SystemQRcodeOutline />,
            badge: Badge.dot,
         }
      ],
      tabs: [
         {
            key: 'news',
            title: '消息',
            icon: <MessageOutline />,
            badge: Badge.dot,
         },
         {
            key: 'personal',
            title: '我的',
            icon: <UserCircleOutline />,
            badge: Badge.dot,
         },
      ]
   }
   /* 设置路由选中状态 */
   setRouteActive = (n) => {
      const path = '/' + this.state.tabs[n].key
      this.props.history.push(path)
   }
   componentDidMount() {
      // 初始化导航数据
      switch(this.props.user.type) {
         case 'laoban':
            const newArr1 = [this.state.commonTabbar[1], ...this.state.tabs]
            this.setState({tabs: newArr1})
            break
         case 'dashen':
            const newArr2 = [this.state.commonTabbar[0], ...this.state.tabs]
            this.setState({tabs: newArr2})
            break
         default: break
      }
   }
   render() {
      const { tabs } = this.state
      return (
         <TabBar safeArea activeKey={this.props.index} onChange={n => this.setRouteActive(n)} style={{backgroundColor:'#fff'}}>
            {tabs.map((item, index) => {
               return (
                  <TabBar.Item key={index} icon={item.icon} title={item.title} />
               )
            })}
         </TabBar>
      )
   }
}
export default connect(
   state => ({
      user: state.user
   })
)(withRouter(MyTabBar))